<template>
    <p>登录页</p>
    <div>
        账号:
        <el-input v-model="account" />
    </div>
    <div>
        密码：
        <el-input v-model="password" type="password" />
    </div>
    <div>
        <button @click="login">登录</button>
    </div>
    <p>acocunt: {{ account }}</p>
    <p>password: {{ password }}</p>
</template>



<script setup>

// 1. 声明变量用来接收账号，密码，将变量跟HTML元素进行绑定
import { ref } from 'vue'

const account = ref('') // 账号
const password = ref('') // 密码

// 2. 根据变量的值来判断是否登录成功
function login() {
    if (account.value == 'admin' && password.value == '123456') {
        alert('登录成功')
    } else {
        alert('账号或密码错误，请重新输入')
    }
}


</script>